<template>
  <section class="m-4">
    <el-card>
      <section slot="header" class="flex items-center justify-between">
        <section class="flex items-center">
          <p>认证类型： </p>
          <el-select v-model="category_id" class="mr-4" clearable placeholder="请选择认证类型">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name" :value="item.id"
            />
          </el-select>

          <el-button type="primary" @click="initData()">搜索</el-button>
        </section>

        <el-button type="success" @click="handleDialogShow()">新增</el-button>
      </section>

      <el-table :data="tableList" border class="mx-4" stripe>
        <el-table-column label="认证类型" prop="category_id">
          <template slot-scope="{row}">
            <p>{{ getType(row.category_id) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="资料标题" prop="title"/>
        <el-table-column label="认证资料" prop="content"/>
        <el-table-column label="添加时间" prop="created_at"/>
        <el-table-column label="启用状态" prop="is_visible">
          <template slot-scope="{row}">
            <el-tag v-if="row.is_visible === 1" type="success">启用</el-tag>
            <el-tag v-else type="info">不启用</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button plain type="primary" @click="handleDialogShow(row)">编辑</el-button>

            <el-popconfirm
              cancel-button-text="取消"
              confirm-button-text="删除"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除此条记录吗？"
              @confirm="handleDel(row)"
            >
              <el-button slot="reference" plain type="danger">删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-size="15"
        :total="meta.total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="initData"
      />
    </el-card>
    <CIForm ref="CIForm" :init-data="initData" :type-list="typeList"/>
  </section>
</template>

<script>
import CIForm from '@/views/anchorQuestion/comps/CIForm'
import request from '@/utils/request'
import { presenterSubject, presenterSubjectById } from '@/api/KTV'
import { NOOP } from '@/utils'

export default {
  data() {
    return {
      typeList: [],
      category_id: undefined,
      tableList: [],
      meta: {
        page: 1,
        total: 0
      }
    }
  },
  components: {
    CIForm
  },
  computed: {
    CIForm() {
      return this.$refs.CIForm
    }
  },
  async created() {
    await this.initTypeList()
    await this.initData()
  },
  methods: {
    async initTypeList() {
      try {
        const { data: { list } } = await request({
          url: `/presenter/subject/category`,
          params: {
            page: 1,
            per_page: 1e3
          }
        })
        this.typeList = list
      } catch (e) {

      }
    },

    async initData(page = 1) {
      try {
        const { data: { data, current_page, total } } = await presenterSubject(this.category_id, { page })
        this.meta.page = current_page
        this.meta.total = total
        this.tableList = data
      } catch (e) {

      }
    },
    handleDialogShow(entry) {
      this.CIForm.show(entry)
    },

    /* 根据id 获取 name */
    getType(id) {
      const target = this.typeList.find(item => item.id === id)
      return target.name
    },

    handleDel(row) {
      const id = row.id

      presenterSubjectById(id)
        .then(() => {
          this.$message.success('删除成功')
          this.initData()
        })
        .catch(NOOP)
    }
  }
}
</script>

<style scoped>

</style>
